<template>
  <div class="marketingChannelTotal-container">
    <div class="content-container">
      <div class="naviga"><span>营销渠道分析&nbsp;>  </span><span class="setColor">营销渠道大盘分析</span></div>
      <div class="summaryHeader">
        <span style="margin-right: 5px;"><img src="../../../../images/wicon.png" alt=""></span><span>监控</span>
        <span class="lightYellow">{{baseInfoMarket.cityNumber}}</span>个城市，
        <span class="lightYellow">{{baseInfoMarket.shopNumber}}</span>个终端门店，
        <span class="lightYellow">{{baseInfoMarket.onLineShopNumber}}</span>个电商平台
      </div>
      <div class="summaryContent">
        <div class="summaryContent-item salesStatistics boederSet paddingSet">
          <div class="salesStatisticsItem salesStatisticsHeader flex-container space-between">
            <div class="salesStatisticsHeaderItem" style="font-size: 16px;font-weight: bold">
              销售统计
            </div>
            <div class="salesStatisticsHeaderItem">
              <el-radio-group size="small" v-model="mountSearch.num" @change="onRadioChangeMon">
                <el-radio-button v-for="(item, index) in setMonDuration"
                                 :label="item.val" :key="index">{{item.name}}</el-radio-button>
              </el-radio-group>
              <div class="el-select-container">
                <div class="el-select-label">选择日期</div>
                <el-select size="small" v-model="selectedYear" placeholder="选择年份"
                           style="width: 156px" @change="onSaleRangeChange">
                  <el-option v-for="(item, index) in summaryYearRange" :key="index" :label="item.name" :value="item.val">
                  </el-option>
                </el-select>
              </div>
            </div>
          </div>
          <div class="salesStatisticsItem salesStatisticsContent boederSet">
            <div class="titleHeader">销售分析</div>
            <div class="salesStatisticsContentContainer flex-container">
              <div class="salesStatisticsEcharts echartsLeft">
                <div class="echartsLeftContainer">
                  <div class="echartsLeftSwitch">
                    <el-radio-group size="medium" v-model="mountSearch.type" @change="typeChangeRadio">
                      <el-radio-button label="2">销售额</el-radio-button>
                      <el-radio-button label="1">销售量</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div id="circleEcharts" style="height: 300px;"></div>
                </div>
              </div>
              <div class="salesStatisticsEcharts echartsRight">
                <div class="echartsRightContainer">
                  <div id="echartsRightEcharts" style="height: 325px;"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="summaryContent-item aggregateSet boederSet" style="margin: 12px 0;">
          <div class="aggregateSetContainer">
            <div class="aggregateSetItem aggregateSetItemHeader">
              <div class="salesStatisticsHeaderItem" style="font-size: 16px;font-weight: bold">销售综合数据</div>
              <div class="salesStatisticsHeaderItem">
                <el-radio-group size="small" v-model="searchSetData.num" @change="onRadioChangeThis">
                  <el-radio-button v-for="(item, index) in setMonDuration"
                                   :label="item.val" :key="index">{{item.name}}</el-radio-button>
                </el-radio-group>
                <div class="el-select-container">
                  <div class="el-select-label">选择日期</div>
                  <el-month-select :date-start.sync="searchSetData.startTime" :date-end.sync="searchSetData.endTime" :date-change="searchSetDataChange"></el-month-select>
                </div>
              </div>
            </div>
            <!--  线下渠道分布及销售情况 -->
            <div class="aggregateSetItem boederSet">
              <div class="titleHeader">线下渠道分布及销售情况</div>
              <div class="aggregateShowContainer">
                <div class="aggregateShowContainerItem aggregateShowLeft">
                  <div class="aggregateShowLeftItem aggregateEchartsLeft">
                    <div id="mapEcharts" ref="mapEcharts" style="height: 500px;font-weight:bold"></div>
                  </div>
                  <div class="aggregateShowLeftItem aggregateEchartsRight">
                    <div class="marginSet" v-if="aggregateSet.length > 0">
                      <el-checkbox :indeterminate="isIndeterminate" v-model="checkAllChannel" @change="handleCheckAllChange">全部渠道</el-checkbox>
                      <el-checkbox-group v-model="checkedChannel" @change="handleSetChannelChange">
                        <el-checkbox v-for="(channel, index) in aggregateSet" :label="channel" :key="index">{{channel}}</el-checkbox>
                      </el-checkbox-group>
                    </div>
                  </div>
                </div>
                <div class="aggregateShowContainerItem aggregateShowRight aggregateTable">
                  <div class="aggregateTableItem flex-container" style="height: 40px;font-size: 16px;">各终端销售统计({{area}})</div>
                  <div class="aggregateTableItem">
                    <el-table class="setHeight boederSet" :data="aggregateSetData"
                              border stripe height="352" style="width: 98%;">
                      <el-table-column
                        prop="areaName"
                        label="地区/终端"
                        width="120">
                      </el-table-column>
                      <el-table-column
                        prop="shopNum"
                        :formatter="formatterNum"
                        label="终端数(个)"
                        sortable
                        width="115">
                      </el-table-column>
                      <el-table-column
                        prop="salesCount"
                        sortable
                        :sort-method="sortSaleCount"
                        label="销量(件)"
                        width="110">
                      </el-table-column>
                      <el-table-column
                        prop="salesAmount"
                        sortable
                        :sort-method="sortSaleAmount"
                        :formatter="salesAmountString"
                        label="销额(万元)">
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </div>
            </div>
            <!--  渠道的品类、型号、SUK销售  -->
            <div class="summaryContent-item sukSet boederSet">
              <div class="titleHeader flex-container space-between">
                <div class="sukSettitleHeader">渠道的品类、型号、SKU销售</div>
                <div class="sukSettitleHeader">
                  <el-select @change="channelValueChange" v-model="channelValue" placeholder="请选择" size="small" style="width: 152px;">
                    <el-option class="selectFont" v-for="(item,index) in channelOptionSet"
                               :key="index" :label="item" :value="item">
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="sukSetContent">
                <div class="sukSetContentHeader">
                  <div class="sukSetHeaderContent flex-container">
                    <div class="sukSetHeaderContent-item">
                      <div class="sukHeader-itemContent flex-container">
                        <div class="circleSetMineContianer flex-container">
                          <div class="flex-container circleSetMine circleSetMineCategory" v-text="staticInfo.categoryNum"></div>
                          <div>品类数量（个）</div>
                        </div>
                        <div class="circleSetMineContianer flex-container">
                          <div class="flex-container circleSetMine circleSetMineProdCode" v-text="staticInfo.productNum"></div>
                          <div>型号数量（个）</div>
                        </div>
                      </div>
                    </div>
                    <div class="sukSetHeaderContent-item">
                      <div class="sukHeader-itemContent sukHeader-itemRight flex-container">
                        <div class="sukHeader-itemRight-item">
                          <div class="itemRight-itemContainer flex-container">
                            <div class="itemRight-item itemRight-itemImgSet">
                              <img class="imgSet" src="../../../../images/marketSale/sale_set.png" alt="">
                            </div>
                            <div class="itemRight-item">
                              <div class="itemRight-itemSet">销售量</div>
                              <div class="itemRight-itemSet">
                                <span>￥</span><span v-text="staticInfo.salesCount"></span><span>件</span>
                              </div>
                              <div class="itemRight-itemSet">
                                <div class="" style="margin-right: 6px;">环比</div>
                                <div class="flex-container" v-if="parseFloat(staticInfo.salesCountRingRatio) >= 0">
                                  <span class="colorUp">{{staticInfo.salesCountRingRatio || 0.00}}%</span>
                                  <span class="leftSet"><img src="../../../../images/Up-icon.png" alt=""></span>
                                </div>
                                <div class="flex-container" v-else>
                                  <span class="colorDown">{{staticInfo.salesCountRingRatio || 0.00}}%</span>
                                  <span class="leftSet"><img src="../../../../images/Down-icon.png" alt=""></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="sukHeader-itemRight-item">
                          <div class="itemRight-itemContainer flex-container">
                            <div class="itemRight-item itemRight-itemImgSet">
                              <img class="imgSet" src="../../../../images/marketSale/saleIcon.png" alt="">
                            </div>
                            <div class="itemRight-item">
                              <div class="itemRight-itemSet">销售额</div>
                              <div class="itemRight-itemSet">
                                <span>￥</span><span v-text="staticInfo.salesAmount"></span><span>万</span>
                              </div>
                              <div class="itemRight-itemSet">
                                <div class="" style="margin-right: 6px;">环比</div>
                                <div class="flex-container" v-if="parseFloat(staticInfo.salesAmountRingRatio) >= 0">
                                  <span class="colorUp">{{staticInfo.salesAmountRingRatio || 0.00}}%</span>
                                  <span class="leftSet"><img src="../../../../images/Up-icon.png" alt=""></span>
                                </div>
                                <div class="flex-container" v-else>
                                  <span class="colorDown">{{staticInfo.salesAmountRingRatio || 0.00}}%</span>
                                  <span class="leftSet"><img src="../../../../images/Down-icon.png" alt=""></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="sukSetContentBody">
                  <div id="categoryEcharts" style="height: 450px"></div>
                </div>
              </div>
            </div>
            <!--  客流监控  -->
            <div class="summaryContent-item boederSet">
              <div class="titleHeader space-between">
                <div class="titleHeader-item">
                  客流监控
                </div>
                <div class="titleHeader-item flex-container" style="font-size: 12px;">
                  <span style="margin-right: 5px;"><img src="../../../../images/wicon.png" alt=""></span>
                  <span style="color: #606266;">数据为统计的使用监测硬件的门店</span>
                </div>
              </div>
              <div class="passengerFlowContainer">
                <div class="passengerFlowContainer-item flowContainerHeader flex-container">
                  <div class="flowContainer-item">
                    <div class="flowContainer-content flex-container">
                      <div class="container-content flex-container space-between">
                        <div>到店客数</div>
                        <div class="" style="font-size: 18px;"><span v-text="flowCustomInfo.passengerFlowNum"></span><span>人</span></div>
                      </div>
                      <div class="container-content flex-container">
                        <div style="margin-right: 6px;">上次到店人数:</div>
                        <div><span v-text="flowCustomInfo.lastTimePassengerFlowNum"></span><span>人</span></div>
                      </div>
                      <div class="container-content flex-container">
                        <div class="" style="margin-right: 12px;">环比:</div>
                        <div class="flex-container" v-if="parseInt(flowCustomInfo.ringRatioNum)> 0">
                          <div class="colorUp">
                            <span style="margin: 0 6px 0 3px;" v-text="flowCustomInfo.ringRatio"></span>
                          </div>
                          <div><img src="../../../../images/Up-icon.png" alt=""></div>
                        </div>
                        <div class="flex-container" v-else>
                          <div class="colorDown">
                            <span style="margin: 0 6px 0 3px;" v-text="flowCustomInfo.ringRatio"></span>
                          </div>
                          <div><img src="../../../../images/Down-icon.png" alt=""></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="passengerFlowContainer-item flowContainerContent">
                  <div class="flowContainerContent-item">
                    <div id="saleSummaryChart" style="height: 300px"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { durationSwitch, loadMapState, randomSolve } from 'utils/mUtils'
  import { mapSolve } from 'api/config'
  import * as opreate from 'api/getData'
  import ElMonthSelect from 'router/marketSale/compentSet/ElMonthSelect/el-month-select.vue'
  let timeFn = null

  export default {
      name: "marketing-channel-total",
      data() {
          return {
            mountSearch:{ num:6, type: 2 },
            yearMonSet: '6',
            checkAllChannel: false,
            isIndeterminate: false,
            aggregateSet: [],
            aggregateSetData: [],
            area:'全国',
            checkedChannel: [],
            searchSetNext: null,
            selectedYear: '',
            summaryYearRange: durationSwitch(true),
            setMonDuration: durationSwitch(),
            channelValue: '',
            staticInfo: {},
            channelOptionSet:[],
            flowCustomInfo: {},
            mapSetEcharts: '',
            getCategorySalesTrend: [],
            searchSetData: { startTime: '', endTime: '', area: 1, type: 1, num: 6, channel: '全部' },
            baseInfoMarket: {}
          }
      },
      components:{
        ElMonthSelect
      },
      mounted() {
        this.getBaseInfoMarket()
        this.initStateMine()
        this.initStateParam()
        this.initMapEcharts()
        this.getFlowCustom({ num: 6 })
      },
      methods: {
        formatterNum(row, column){
          return ('' == row.shopNum || null == row.shopNum) ? 1 :  row.shopNum;
        },
        sortSaleCount(prev,next){
          return parseFloat(prev.salesCount || '0') - parseFloat(next.salesCount || '0')
        },
        sortSaleAmount(prev,next){
          return parseFloat(prev.salesAmount || '0') - parseFloat(next.salesAmount || '0')
        },
        getBaseInfoMarket(){
          opreate.getShopCount().then(res => {
            this.baseInfoMarket = res.data || {}
          })
        },
        initStateMine(){
          opreate.getChannelSetAll({ flag: 0 }).then(res => {
            this.channelOptionSet = res.data instanceof Array ? res.data : []
            this.channelValue = this.channelOptionSet[0] || ''
            if(this.channelValue){
              this.getStaticInfo({ num: 6, channel: this.channelValue })
              this.initCategoryEcharts({ num: 6, channel: this.channelValue })
            }
          }).catch(err => console.error(err))
        },
        searchSetDataChange(searchSetData){
          let { dateStart, dateEnd } = searchSetData
          this.searchSetData = Object.assign(this.searchSetData, { startTime: dateStart, endTime: dateEnd, num: '' })
          this.loadMapStateSet({ ...this.searchSetData, num: 0 },true)
          this.getFlowCustom({ num: 2018, fromDate: dateStart, endDate: dateEnd })
          this.getStaticInfo({ channel: this.channelValue, startTime: dateStart, endTime: dateEnd })
          this.initCategoryEcharts({ channel: this.channelValue, startTime: dateStart, endTime: dateEnd })
        },
        onRadioChangeThis(num){
          this.searchSetData = Object.assign(this.searchSetData,{ startTime: '', endTime: '' })
          this.loadMapStateSet({ ...this.searchSetData },true)
          this.getFlowCustom({ num })
          this.getStaticInfo({ num, channel: this.channelValue })
          this.initCategoryEcharts({ num, channel: this.channelValue })
        },
        initStateParam(){
          this.initStateSetCircle(this.mountSearch)
          this.initStateRightEcharts(this.mountSearch)
        },
        initStateSetCircle(param){
          let tempSet = param.type == 1 ? { saleUnit: '万件', saleSet: '销量' } : { saleUnit: '万元', saleSet: '销额' }
          opreate.getSaleCountAnalysisPost(param).then(res => {
            this.initCircleEcharts(res.data || [], Object.assign(tempSet, { scale: 1 }))
          })
        },
        initStateRightEcharts(param){
          opreate.getSaleTotalMount(param).then(res => {
            this.initEchartsRightEcharts(res.data || [])
          })
        },
        handleCheckAllChange(newVal) {
          this.checkedChannel = newVal ? this.aggregateSet : []
          this.isIndeterminate = false
          let mineSet = newVal > 0 ? this.aggregateSet.toString() : ""
          let mineSearch = this.searchSetNext
            ? { ...this.searchSetNext, channel: mineSet }
            : { ...this.searchSetData, channel: mineSet }
          this.loadMapStateSet(mineSearch)
        },
        handleSetChannelChange(newVal) {
          let checkedCount = newVal.length
          this.checkAllChannel = checkedCount === this.aggregateSet.length
          this.isIndeterminate = checkedCount > 0 && checkedCount < this.aggregateSet.length
          let mineSet = newVal.length > 0 ? newVal.toString() : ""
          let mineSearch = this.searchSetNext
            ? { ...this.searchSetNext, channel: mineSet }
            : { ...this.searchSetData, channel: mineSet }
          this.loadMapStateSet(mineSearch)
        },
        onRadioChangeMon(newVal){
          this.selectedYear = ''
          let paramSet = { num: newVal, type: this.mountSearch.type }
          this.initStateSetCircle(paramSet)
          this.initStateRightEcharts(paramSet)
        },
        onSaleRangeChange(newVal){
          Object.assign(this.mountSearch, { num: '' })
          let paramSet = { num: newVal, type: this.mountSearch.type }
          this.initStateSetCircle(paramSet)
          this.initStateRightEcharts(paramSet)
        },
        typeChangeRadio(newVal){
          this.initStateSetCircle({ num: this.mountSearch.num || this.selectedYear, type: newVal })
        },
        channelValueChange(channel){
          let { num, startTime, endTime } = this.searchSetData
          let tempSet = num != '' ? { channel, num } : { channel, startTime: startTime, endTime: endTime }
          this.getStaticInfo(tempSet)
          this.initCategoryEcharts(tempSet)
        },
        pannelSetMap(mapSet, mapSolveSet, areaSet = false){
          let shopNum = mapSolveSet.filter(v => v.shopNum != null).reduce((sum,v) => {
            return parseFloat(sum|| 0) + parseFloat(v.shopNum|| 0)
          },0)
          let salesCount = mapSolveSet.filter(v => v.salesCount != null).reduce((sum,v) => {
            return parseFloat(sum || 0) + parseFloat(v.salesCount|| 0)
          },0)
          let salesTemp = mapSolveSet.filter(v => v.salesAmount != null).reduce((sum,v) => {
            return parseFloat(sum|| 0) + parseFloat(v.salesAmount|| 0)
          },0)
          let salesAmount = typeof salesTemp == 'number' ? (salesTemp / 10000).toFixed(2) : '0.00'
          const pos = { leftPlus: 45, leftCur: 180, left: 20, top: 5 }
          const style = { font: '16px "Microsoft YaHei", sans-serif', textColor: '#333', lineColor: 'rgba(147, 235, 248, .8)'}
          const titleSet = {
            title: {
              textStyle:{
                fontWeight: 'normal',
                fontSize: 18
              },
              left: 15,
              top: 10,
              text: '全国',
              subtextStyle: {
                color: '#333',
                fontSize: 15,
                fontWeight:600,
                rich: {
                  a: {
                    color: '#ffc73e',
                    fontWeight:600,
                  }
                }
              },
              subtext: `终端数：{a|${shopNum}} 个，销量：{a|${parseInt(salesCount)}} 件，销额：{a|${parseFloat(salesAmount).toFixed(2)}} 万元`
            }
          }
          const graphicSet = {
            graphic: [
              {
                id: '20181129',
                type: 'group',
                left: pos.left,
                z:2,
                top: pos.top + 8,
                children: [{
                  type: 'text',
                  left: 0,
                  top: 'middle',
                  style: {
                    text: '全国',
                    textAlign: 'center',
                    fill: style.textColor,
                    font: style.font
                  },
                  onclick: () => {
                    this.mapSetEcharts = this.mapSetEcharts ? this.mapSetEcharts :  this.$echarts.init(this.$refs.mapEcharts)
                    this.searchSetNext = null
                    this.loadMapStateSet(Object.assign(this.searchSetData,{ areaCode:'china' }),true)
                  }
                }]
              },
              {
                id: '20181130',
                type: 'group',
                z:2,
                left: pos.left + pos.leftPlus,
                top: pos.top + 8,
                children: [
                  {
                    type: 'polyline',
                    left: -95,
                    top: 35,
                    shape: {
                      points: [[0, 0], [6, 6],[0, 12]]
                    },
                    style: {
                      stroke: style.textColor,
                      key: '2020',
                      lineWidth: 1
                    }
                  },
                  {
                    type: 'text',
                    left: -72,
                    top: 35,
                    style: {
                      text: areaSet,
                      textAlign: 'center',
                      fill: style.textColor,
                      font: style.font
                    }
                  }]
              }
            ]
          }

          let optionSet = {
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                if (params.data && params.data.value){
                  return `地区: ${params.name}</br>终端数: ${params.data.shopNum}个</br>销售量: ${params.data.salesCount}件</br>销售额: ${((params.data.salesAmount || 0)/10000).toFixed(2)}万元`
                }
              }
            },
            visualMap: {
              left: 'left',
              top: 'bottom',
              text: ['高','低'],
              calculable: false,
              inRange: {
                color: ['#e0ffff', '#409EFF']
              }
            },
            series: [
              {
                name: '用户分布',
                type: 'map',
                mapType: mapSet.name,
                roam: true,
                zoom: 1.2,
                scaleLimit:{
                  min: 1,
                  max: 3
                },
                label: {
                  normal: {
                    show: true
                  },
                  emphasis: {
                    show: true
                  }
                },
                data: mapSolveSet
              }
            ]
          }
          optionSet = areaSet ? Object.assign({},optionSet,graphicSet,{
            title: {
              left: 15,
              top: 25,
              subtextStyle: {
                color: '#333',
                fontSize: 15,
                rich: {
                  a: {
                    color: '#ffc73e'
                
                  }
                }
              },
              subtext: `终端数：{a|${shopNum}} 个，销量：{a|${parseInt(salesCount)}} 件，销额：{a|${parseFloat(salesAmount).toFixed(2)}} 万元`
            }
          }) : Object.assign({},optionSet,titleSet)
          return optionSet
        },
        loadMapStateSet(param = {},flag = false){
          const { type, areaCode, area } = param
          opreate.getUnLineChannelSale(param).then(res => {
            let { offlineChannel, offlineChnnelShopSales } = res.data || {}
            this.area = area != 1 ? area : '全国';
            this.aggregateSetData = offlineChnnelShopSales || []
            if(flag){
              this.checkedChannel = this.aggregateSet = offlineChannel.map(v => v.channel)
              this.checkAllChannel = true
            }
            const mapSolveSet = type == 1 ? mapSolve.map(v => {
              let temSet = offlineChnnelShopSales.find((item) => item.areaName && item.areaName.indexOf(v.name) > -1)
              v.value = temSet ? temSet.salesAmount : ''
              v.type = type
              return Object.assign(v,temSet ? temSet : {} )
            }) : offlineChnnelShopSales.map(v => {
              return Object.assign(v,{ name: v.areaName, value: v.salesAmount, type: type })
            })
            loadMapState(areaCode).then(mapSet => {
              this.$echarts.registerMap(mapSet.name, mapSet.map)
              this.mapSetEcharts.clear()
              let mineSet = type == 1 ? this.pannelSetMap(mapSet, mapSolveSet) : this.pannelSetMap(mapSet, mapSolveSet, area)
              this.mapSetEcharts.setOption(mineSet)
            })
          })
        },
        initMapEcharts(){
          this.mapSetEcharts = this.$echarts.init(this.$refs.mapEcharts)
          this.loadMapStateSet(Object.assign(this.searchSetData,{ areaCode:'china' }),true)
          this.mapSetEcharts.on('click',(params) => {
            if(params.value){
              let { num, startTime, endTime } = this.searchSetData
              let { name, type, areaName } = params.data
              let searchSetData = { num, startTime, endTime, area: areaName, channel: '全部', areaCode: name }
              if(type == 1){
                this.searchSetNext = { ...searchSetData, type: 2 }
                clearTimeout(timeFn)
                timeFn = setTimeout(() => {
                  this.loadMapStateSet(this.searchSetNext, true)
                }, 250)
              }else{
                this.obtainMapOnlyState({ ...searchSetData, type: 3 })
              }
            }else {
              this.$message.error('该地区暂无数据')
            }
          })
        },
        obtainMapOnlyState(param = {}) {
          opreate.getUnLineChannelSale(param).then(res => {
            let { offlineChnnelShopSales } = res.data
            this.area = param.area;
            this.aggregateSetData = offlineChnnelShopSales || []
          })
        },
        salesAmountString(rowSet){
          let tempSet = typeof parseFloat(rowSet.salesAmount) == 'number'
            ? (parseFloat(rowSet.salesAmount) / 10000).toFixed(2) : '0.00'
          return `${tempSet}`
        },
        initEchartsRightEcharts(dataSet = []){
          if(document.getElementById('echartsRightEcharts') == null) return
          let sumSet = dataSet.length > 0 ? dataSet.reduce((sum,v) => {
              return { saleAmount: sum.saleAmount + parseFloat(v.saleAmount || 0), saleCount: sum.saleCount + parseFloat(v.saleCount || 0) }
            },{ saleAmount: 0,saleCount: 0 }) : { saleAmount: 0.00,saleCount: 0 }
          let myChart = this.$echarts.init(document.getElementById('echartsRightEcharts'))
          let titleSet = `销额: ${sumSet.saleAmount.toFixed(2)|| 0}万元  销售量: ${sumSet.saleCount || 0}件`
          let option = {
            title: {
              textStyle:{
                fontWeight: 'normal',
                fontSize: 16
              },
              left: '12',
              text: titleSet
            },
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              },
              formatter: function (params) {
                if(params[1]){
                  let tempSet = `${params[0].name}<br/>
                         ${params[0].seriesName}：${params[0].value}<br/>
                         同比增长率：${params[0].data.yoyGrowth}%； 环比增长率：${params[0].data.momGrowth}%<br/>
                         ${params[1].seriesName}：${params[1].value}<br/>
                         同比增长率：${params[1].data.yoyGrowth}%； 环比增长率：${params[1].data.momGrowth}%`
                  return tempSet
                }else if (params[0]){
                  let tempSet = `${params[0].name}<br/>
                         ${params[0].seriesName}：${params[0].value}<br/>
                         同比增长率：${params[0].data.yoyGrowth}%； 环比增长率：${params[0].data.momGrowth}%`
                  return tempSet
                }else {
                  return null
                }
              }
            },
            legend: {
              right:'20',
              data:['销售额','销售量']
            },
            xAxis: [
              {
                type: 'category',
                data: dataSet.map(v => v.dateTime),
                axisTick: {
                  alignWithLabel: true
                }
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '销售额(万元)'
              },
              {
                type: 'value',
                name: '销售量(件)'
              }
            ],
            series: [
              {
                name:'销售额',
                type:'line',
                smooth:true,
                itemStyle: {
                  color: '#64bef5'
                },
                yAxisIndex: 0,
                barWidth: 30,
                data:dataSet.map(v => {
                  return { name: v.dateTime, value: v.saleAmount, momGrowth: v.xeMomGrowth, yoyGrowth: v.xeYoyGrowth }
                })
              },
              {
                name:'销售量',
                type:'line',
                smooth:true,
                itemStyle: {
                  color: '#9c96e7'
                },
                yAxisIndex: 1,
                data:dataSet.map(v => {
                  return { name: v.dateTime, value: v.saleCount, momGrowth: v.xlMomGrowth, yoyGrowth: v.xlYoyGrowth }
                })
              }
            ]
          }
          myChart.setOption(option)
        },
        initCircleEcharts(dataSet = [], renderSet = {}){
          if(document.getElementById('circleEcharts') == null) return
          let { scale, saleUnit, saleSet } = renderSet
          let rich = {
            green: {
              padding: [6, 0, 0, 6],
              fontSize: 12 * scale,
              align: 'left'
            },
            blue: {
              padding: [6, 0, 0, 0],
              fontSize: 12 * scale,
              align: 'left'
            }
          }
          let seriesData = dataSet.map((v,index) => {
            return { value: v.salesVolume, name: `${v.line}${saleSet}`, proportion: v.proportion }
          })
          let sumSet = seriesData.reduce((sum,v) => {
            return sum + parseFloat(v.value || 0)
          },0).toFixed(2)
          let myChart = this.$echarts.init(document.getElementById('circleEcharts'))
          let option = {
            title: {
              text: `${sumSet}\n${saleUnit}`,
              x: 'center',
              y: 'center',
              textStyle: {
                color: "#ffc72b",
                fontSize: 13 * scale
              }
            },
            tooltip: {
              trigger: 'item',
              show: true,
              formatter(params) {
                let { name, value, proportion } = params.data
                proportion = proportion || 0
                return `${name}: ${value} ${saleUnit}<br/> 占比: ${proportion}`
              }
            },
            series: [{
              type: 'pie',
              hoverAnimation: false,
              radius: ['35%', '45%'],
              startAngle: 180,
              color: ['#64bef5', '#9c96e7'],
              label: {
                normal: {
                  formatter(params) {
                    let { name, value, proportion } = params.data || {}
                    let nameStart = name.substr(0,2)
                    let nameEnd = name.substr(2)
                    return '{blue|类型: ' + nameStart + '}\n{blue|' + nameEnd +': ' + value + saleUnit + '}\n{blue|' + '占比: ' + (proportion || 0)  + '}';
                  },
                  rich: rich
                }
              },
              labelLine: {
                normal: {
                  lineStyle: {
                    color: '#0b5263'
                  },
                  length: 12
                }
              },
              data: seriesData
            }]
          }
          myChart.setOption(option)
        },
        getFlowCustom(param = {}){
          opreate.getFlowCustom(param).then(res => {
            let { dayPFList,...flowCustomInfo  } = res.data || {}
            this.flowCustomInfo = flowCustomInfo || {}
            this.initPassengerFlow(dayPFList)
          })
        },
        initPassengerFlow(paramSet = []){
          let dayPFList = paramSet || []
          if(document.getElementById('saleSummaryChart') == null) return
          let myChart = this.$echarts.init(document.getElementById('saleSummaryChart'))
          let option = {
            tooltip : {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985'
                }
              }
            },
            yAxis: [
              {
                name: '到店客数(万人)',
                type: 'value'
              }
            ],
            grid: {
              left: '3%',
              right: '4%',
              bottom: '3%',
              containLabel: true
            },
            xAxis : [
              {
                type : 'category',
                boundaryGap : false,
                data : dayPFList.map(v => v.time)
              }
            ],
            series : [
              {
                name:'到店客数',
                type:'line',
                smooth:true,
                stack: '总量',
                itemStyle: {
                  color: '#64bef5'
                },
                areaStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#64bef5'
                    }, {
                      offset: 1, color: '#daeffd'
                    }],
                    globalCoord: false
                  }
                },
                data: dayPFList.map(v => v.passengerFlowNum)
              }
            ]
          }
          myChart.setOption(option)
        },
        getStaticInfo(param = {}){
          opreate.getChannelStaticInfo(param).then(res => {
            this.staticInfo = res.data || {}
          })
        },
        initCategoryEcharts(param = {}){
          if(document.getElementById('categoryEcharts') == null) return
          const myChart = this.$echarts.init(document.getElementById('categoryEcharts'))
          const pos = { leftPlus: 90, leftCur: 180, left: 20, top: 0 }
          const style = { font: '16px "Microsoft YaHei", sans-serif', textColor: '#333', lineColor: 'rgba(147, 235, 248, .8)'}
          let clickSet = true
          myChart.clear()
          opreate.getCateSalesTrend(param).then(res => {
            let tempSet = res.data || []
            this.getCategorySalesTrend = {
              title: {
                textStyle:{
                  fontWeight: 'normal',
                  fontSize: 16
                },
                left: '12',
                text: '全品类销售',
              },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                  type: 'cross',
                  crossStyle: {
                    color: '#999'
                  }
                }
              },
              legend: {
                right:'20',
                data:['销售量','销售额']
              },
              xAxis: [
                {
                  type: 'category',
                  data: tempSet.map(v => v.category),
                  axisTick: {
                    alignWithLabel: true
                  }
                }
              ],
              yAxis: [
                {
                  type: 'value',
                  name: '销售量(万件)'
                },
                {
                  type: 'value',
                  name: '销售额(万元)'
                }
              ],
              series: [
                {
                  name:'销售量',
                  type:'line',
                  itemStyle: {
                    color: '#9c96e7'
                  },
                  smooth:true,
                  yAxisIndex: 0,
                  data: tempSet.map(v => {
                    return parseFloat(v.salesCount).toFixed(2)
                  })
                },
                {
                  name:'销售额',
                  type:'bar',
                  itemStyle: {
                    normal: {
                      color: new this.$echarts.graphic.LinearGradient(
                        0, 0, 0, 1,
                        [
                          {offset: 0, color: '#9c96e7'},
                          {offset: 1, color: '#64bef5'}
                        ]
                      )
                    }
                  },
                  yAxisIndex: 1,
                  barMaxWidth: 25,
                  data: tempSet.map(v => {
                    return parseFloat(v.salesAmount).toFixed(2)
                  })
                }
              ]
            }
            myChart.setOption(this.getCategorySalesTrend)
          })
          myChart.on('click', (params) => {
            if(clickSet){
              let { num, startTime, endTime } = this.searchSetData
              let tempSet = num != '' ? { num, channel: this.channelValue  } : { channel: this.channelValue, startTime: startTime, endTime: endTime }
              opreate.getCateProdNextTrend(Object.assign(tempSet,{ category: params.name })).then(res => {
                const tempSet = res.data || { productList: [] }
                const mineSetData = {
                  grid: {
                    left: '9%',
                    right: '9%',
                    top: '16%',
                    bottom: 90,
                  },
                  dataZoom: [
                    {
                      type: 'slider',
                      "show": true,
                      "height": 30,
                      "xAxisIndex": [0],
                      bottom: 30,
                      "start": 43,
                      "end": 57,
                      handleSize: '110%',
                      handleStyle:{
                        color:"#d3dee5"
                      },
                      textStyle:{
                        color:"#fff"
                      },
                      borderColor:"#90979c"
                    },
                    {
                      "type": "inside",
                      "show": true,
                      "height": 30,
                      "start": 43,
                      "end": 57
                    }]
                }
                let optionCategoryItemSet = {
                  title: {
                    textStyle:{
                      fontWeight: 'normal',
                      fontSize: 14
                    },
                    right: '20',
                    text: `总销售量:${parseFloat(tempSet.salesCount)}件;  总销售额:${parseFloat((tempSet.salesAmount || 0)/10000).toFixed(2)}万元`,
                  },
                  grid: {
                    left: '9%',
                    right: '9%',
                    top: '16%'
                  },
                  tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                      type: 'cross',
                      crossStyle: {
                        color: '#999'
                      }
                    }
                  },
                  graphic: [
                    {
                      id: '20181015',
                      type: 'group',
                      left: pos.left,
                      top: pos.top + 8,
                      children: [{
                        type: 'text',
                        left: 0,
                        top: 'middle',
                        style: {
                          text: '全品类销售',
                          textAlign: 'center',
                          fill: style.textColor,
                          font: style.font
                        },
                        onclick: () => {
                          myChart.clear()
                          myChart.setOption(this.getCategorySalesTrend)
                          clickSet = true
                        }
                      }]
                    },
                    {
                      id: '20181016',
                      type: 'group',
                      left: pos.left + pos.leftPlus,
                      top: pos.top + 8,
                      children: [
                        {
                          type: 'polyline',
                          left: -95,
                          top: 35,
                          shape: {
                            points: [[0, 0], [6, 6],[0, 12]]
                          },
                          style: {
                            stroke: style.textColor,
                            key: '2019',
                            lineWidth: 1
                          }
                        },
                        {
                          type: 'text',
                          left: -70,
                          top: 35,
                          style: {
                            text: params.name,
                            textAlign: 'center',
                            fill: style.textColor,
                            font: style.font
                          }
                        }]
                    }
                  ],
                  xAxis: [
                    {
                      type: 'category',
                      data: tempSet.productList.map(v => v.procuctCode),
                      axisTick: {
                        alignWithLabel: true
                      }
                    }
                  ],
                  yAxis: [
                    {
                      type: 'value',
                      name: '销售量(件)'
                    },
                    {
                      type: 'value',
                      name: '销售额(万元)'
                    }
                  ],
                  series: [
                    {
                      name:'销售量',
                      type:'line',
                      itemStyle: {
                        color: '#9c96e7'
                      },
                      smooth:true,
                      yAxisIndex: 1,
                      data: tempSet.productList.map(v => {
                        return parseFloat(v.salesCount)
                      })
                    },
                    {
                      name:'销售额',
                      type:'bar',
                      barMaxWidth: 25,
                      itemStyle: {
                        normal: {
                          color: new this.$echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                              {offset: 0, color: '#9c96e7'},
                              {offset: 1, color: '#64bef5'}
                            ]
                          )
                        }
                      },
                      data: tempSet.productList.map(v => {
                        return parseFloat(v.salesAmount)
                      })
                    }
                  ]
                }
                tempSet.productList.length >= 60 ? Object.assign(optionCategoryItemSet,mineSetData) : ''
                myChart.clear()
                myChart.setOption(optionCategoryItemSet)
                clickSet = false
              })
            }
          })
        }
      }
  }
</script>

<style scoped>
  .content-container{
    padding-right: 12px;
  }
  .titleHeader{
    font-weight: bold;
  }
  .summaryHeader {
    padding: 10px 12px;
  }
  .summaryContent{
    padding: 12px 12px;
    background: white;
  }
  .colorUp{
    color: #ff2354;
    font-weight: bold;
  }
  .colorDown{
    color: #05c459;
    font-weight: bold;
  }

  /**
  * @desc: This is Note
  * 线下渠道分布及销售情况
  * @author: WJ
  * @date: 2018/10/14 10:23:14
  **/
  .aggregateSetContainer{
    display: flex;
    flex-direction: column;
    padding: 12px;
  }
  .aggregateSetItemHeader{
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .aggregateShowContainer{
    display: flex;
  }
  .aggregateShowLeft{
    flex: 6;
    display: flex;
  }
  .aggregateEchartsLeft{
    flex: 6;
    font-weight: bold;
  }
  .aggregateEchartsRight{
    flex: 1;
  }
  .marginSet{
    padding: 40px 5px;
  }
  .marginSet .el-checkbox+.el-checkbox{
    margin: 0;
  }
  .aggregateShowRight{
    flex: 4;
  }
  .aggregateTable{
    display: flex;
    flex-direction: column;
  }

  /**
  * @desc: This is Note
  * 销售统计
  * @author: WJ
  * @date: 2018/10/12 15:15:18
  **/
  .salesStatisticsHeader{
    margin-bottom: 12px;
  }
  .salesStatistics{
    display: flex;
    flex-direction: column;
  }
  .salesStatisticsHeaderItem{
    display: flex;
    align-items: center;
  }
  .el-select-container{
    display: flex;
    align-items: center;
  }
  .el-select-container .el-select-label{
    margin: 0 10px 0 15px;
  }
  .salesStatisticsEcharts{

  }
  .echartsLeft{
    flex: 2;
    padding: 12px 0 12px 12px;
  }
  .echartsLeftContainer{
    display: flex;
    flex-direction: column;
    padding-right: 12px;
    border-right: 1px solid #E0E8EF;
  }
  .echartsRight{
    flex: 3;
  }

  /**
  * @desc: This is Note
  * 渠道的品类、型号、SKU销售
  * @author: WJ
  * @date: 2018/10/12 10:46:12
  **/
  .sukSet{
    margin: 12px 0;
  }
  .sukSetContentHeader{
    padding: 0 12px 12px 12px;
  }
  .sukSetHeaderContent-item, .circleSetMineContianer{
    flex: 1;
  }
  .circleSetMineContianer{
    flex-direction: column;
  }
  .sukSetHeaderContent{
    border-bottom: 1px solid #E0E8EF;
  }
  .sukSetHeaderContent-item{
    padding: 12px 0;
  }
  .sukHeader-itemContent{
    border-right: 1px solid #E0E8EF;
  }
  .circleSetMine{
    align-items: center;
    height: 100px;
    width: 100px;
    justify-content: center;
    border-radius: 50%;
    font-size: 26px;
    margin: 0 12px 12px 12px;
  }
  .circleSetMineCategory{
    border:10px solid #94DE76;
  }
  .circleSetMineProdCode{
    border:10px solid #4ed196;
  }
  .sukHeader-itemRight{
    height: 100%;
  }
  .sukHeader-itemRight-item{
    height: 100%;
    flex: 1;
  }
  .itemRight-itemContainer{
    justify-content: center;
  }
  .itemRight-itemImgSet{
    margin-right: 12px;
  }
  .itemRight-itemImgSet .imgSet{
    width: 60px;
  }
  .itemRight-itemSet{
    height: 30px;
    display: flex;
    align-items: center;
    line-height: 30px;
  }
  .leftSet{
    margin-left: 6px;
  }

  /**
  * @desc: This is Note
  * 客流监控
  * @author: WJ
  * @date: 2018/10/12 09:18:38
  **/
  .passengerFlowContainer{
    display: flex;
    flex-direction: column;
  }
  .flowContainerHeader{
    background: white;
  }
  .flowContainerContent{
    border-top: 2px solid #E0E8EF;
    display: flex;
    flex-direction: column;
    margin: 0 12px 12px 12px;
  }
  .flowContainer-item{
    padding: 12px;
  }
  .flowContainer-content{
    max-width: 20%;
    flex-direction: column;
    padding-right: 12px;
    border-right: 1px solid #E0E8EF;
  }
  .flowContainer-item:last-child .flowContainer-content{
    border-right: none;
  }
  .container-content{
    height: 30px;
    line-height: 30px;
    width: 100%;
  }
  .flowContainer-item{
    flex: 1;
  }
</style>
